import React from 'react';
// import './app.css';
import { Form, Input, Button, message, Select, Row, Col, Radio } from 'antd';
import { Icon } from '@ant-design/compatible';
import { NavLink, Route, withRouter } from 'react-router-dom';
import 'whatwg-fetch';
const { Option } = Select;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const email = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
const formType = {
    labelCol: { span: 5 },
    wrapperCol: { span: 14 },
    colon: false
}
class NewDin extends React.Component {
    state = {
        place: ''
    }

    //登录事件
    handlePlace = value => {
        this.setState(() => ({ place: value }))
    }
    handleSubmit = (e) => {
        e.preventDefault();
        let url = "http://aishu.ncqsjg.cn/api/v1/order";
        const { form, history } = this.props;
        // const { palce, userEat } = this.state
        const loginName = localStorage.getItem('loginName');
        form.validateFields(async (err, values) => {
            if (!err) {
                const data = {
                    loginName,
                    isOrder: 1,
                    position: values.place,
                    orderType: values.userEat
                }

                fetch(url, {
                    method: 'post',
                    mode: 'cors',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                }).then((response) => {
                    return response.json()
                });

                history.push('/dinPlan');
            }
        })

    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <>
                <Row gutter={8}>
                    <Row gutter={8}>
                        <Col span={24}>
                            <Form onSubmit={this.handleSubmit} labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} className="newDinForm">
                                <FormItem label='用餐类型'  >
                                    {getFieldDecorator('userEat', {
                                        rules: [
                                            { required: true, message: 'xxxx' },
                                            // { pattern: email, message: '请输入正确邮箱' }
                                        ]
                                    })(
                                        <RadioGroup>
                                            <Radio value='brekfast' disabled>
                                                早餐
                            </Radio>
                                            <Radio value='lunch'>
                                                中餐
                            </Radio>
                                            <Radio value="dinner">
                                                晚餐
                            </Radio>
                                        </RadioGroup>
                                    )}
                                </FormItem>
                                <FormItem label='用餐时间'  >
                                    <span>用餐时间：2020/10/22 18:45-19:30</span>
                                </FormItem>
                                <FormItem label="用餐地点"  >
                                    {getFieldDecorator('place', {
                                        rules: [
                                            { required: true, message: 'xxxx' },
                                            // { pattern: email, message: '请输入正确邮箱' }
                                        ]
                                    })(
                                        <Select onSelect={this.handlePlace}>
                                            <Option value="shangHai" key='0'>上海</Option>
                                            <Option value="changSha" key='1'>长沙</Option>
                                        </Select>)}
                                </FormItem>
                                <FormItem label="套餐说明"  >
                                    <span>套餐组合：一大荤、一小荤、一蔬菜、一汤、一米饭、一水果/酸奶</span>
                                </FormItem>
                                <FormItem label="套餐说明"  >
                                    <span>套餐组合：一大荤、一小荤、一蔬菜、一汤、一米饭、一水果/酸奶</span>
                                </FormItem >
                                <FormItem label="付款方式"  >
                                    <span>电子餐券</span>
                                </FormItem>
                                <FormItem  >
                                    <Button type="primary" htmlType="submit" className="login-form-button">
                                        提交
                    </Button>
                                    <NavLink to='/dinPlan'>
                                        <Button>取消</Button>
                                    </NavLink>
                                </FormItem>
                            </Form>
                        </Col>
                    </Row>
                </Row>
            </>
        );
    }
}
const WrappedNormalDinForm = Form.create()(NewDin);
export default withRouter(WrappedNormalDinForm);